<template>
  <div class="importfolder">
    <drawer :title="'导入'+titleFolder+'版本'" :oldData="oldVal" :newData="addVersionForm":display.sync="isShow" width="30%" :isComponentUse="true" @visibleChange="visibleOrderChange">
      <!-- <div>
			    <el-upload class="upload-demo" :action="baseUrl" ref="newupload" accept=".docx,.exe,.zip,.apk" :limit="5" :multiple="false" :http-request="uploadFile" :file-list="fileList" :on-success="successFile" :auto-upload="false" :on-chang="changdel" name="upload">
					<el-button size="mini" style="height: 32px">上传附件</el-button>
				</el-upload>
			</div>
			<div class="banben">
				<span>版本号:</span>
			    <el-input type="input" maxlength="500" show-word-limit  v-model="remark" autocomplete="off"></el-input>
			</div>
			<div class="banben">
				<span>更新内容:</span>
			    <el-input type="textarea" size='medium' v-model="upDataContain"
				placeholder="请按
1.xxx;
2.xxx;
格式输入"></el-input>
			</div>
			<div class="banben">
				<span>类型:</span>
				<el-radio-group v-model="versionType" size="small">
						<el-radio-button v-for="(item,index) in versionTypeList" :label="item.value" :key="index">{{item.label}}</el-radio-button>
					</el-radio-group>
			</div> -->
      <el-form :model="addVersionForm" :rules="addVersionFormRule" ref="addVersionForm" style="margin:10px 10px" label-position="right">
        <el-form-item label-width="120px" :label="titleFolder+'安装包'">
          <el-upload class="upload-demo" :action="baseUrl" ref="newupload" accept=".docx,.exe,.zip,.apk" :limit="5" :multiple="false" :http-request="uploadFile" :file-list="fileList" :on-success="successFile" :auto-upload="false" :on-chang="changdel" name="upload">
            <el-button size="mini" style="height: 32px">上传</el-button>
          </el-upload>
        </el-form-item>
        <el-form-item label="版本号" prop="remark" label-width="120px">
          <el-input type="input" maxlength="500" show-word-limit v-model="addVersionForm.remark" autocomplete="off" style="width:100%"></el-input>
        </el-form-item>
        <el-form-item label="更新内容" prop="upDataContain" label-width="120px">
          <el-input style="width:100%" type="textarea" size='medium' v-model="addVersionForm.upDataContain" placeholder="请按
1.xxx;
2.xxx;
格式输入"></el-input>
        </el-form-item>
        <!-- <el-form-item label="类型" prop="versionType">
          <el-radio-group v-model="addVersionForm.versionType" size="small">
            <el-radio-button v-for="(item,index) in versionTypeList" :label="item.value" :key="index">{{item.label}}</el-radio-button>
          </el-radio-group>
        </el-form-item> -->
      </el-form>
      <div class="userBtn">
        <el-button size="small" type="primary" @click="editPersonSave">上 传</el-button>
      </div>
    </drawer>
  </div>
</template>

<script>
import drawer from '@/components/BaseTable/drawer';

export default {
  name: 'importfolder',
  components: {
    drawer
  },
  props: {
    isShow: {
      type: Boolean,
      default: false
    },
    versionType:{
        type:String
    },
    titleFolder:{
        type:String
    }
  },
  watch:{
    isShow(){
      if(this.isShow){
        this.oldVal = JSON.parse(JSON.stringify(this.addVersionForm))
      }
    }
  },
  data() {
    return {
      oldVal:{},
      newVal:{},
      addVersionFormRule: {
        remark: [
          {
            required: true,
            message: '版本号不能为空',
          }
        ],
        upDataContain: [
          {
            required: true,
            message: '更新内容不能为空',
          }
        ],
        // versionType: [
        //   {
        //     required: true,
        //     message: '类型不能为空',
        //   }
        // ]
      },//校验规则
      addVersionForm: {
        remark: '',//版本号
        upDataContain: '',//更新内容
        versionType: '',//类型
      },//新增表单
      upDataContain: '',//版本更新内容
      fileList: [],
      baseUrl: '',
      remark: '',
    //   versionType: '',
    //   versionTypeList: [
    //     { label: "PC", value: '01' },
    //     { label: "APP", value: '02' },
    //     { label: "车载APP", value: '04' }
    //   ]
    }
  },
  mounted() {

  },
  methods: {
    visibleOrderChange(val) {
      this.$emit('visibleChange', val)
      this.fileList = [];
    },
    editPersonSave() {
      this.$refs.newupload.submit();
    },
    //附件上传
    uploadFile(params) {
      let file = params.file;
      let formDatas = new FormData()
      formDatas.append('fileArray', file)
      formDatas.append('businessType', '04') //文件夹名称
      let uploading = this.$loading({
        lock: true,
        text: '文件上传中',
        spinner: 'el-icon-loading',
        background: 'rgba(255, 255, 255, 0.7)'
      });
      this.$http.post(`/${this.$ServiceName}/api/external/versioncontrol/upload?businessType=001&versionCode=${this.addVersionForm.remark}&versionType=${this.versionType}&remark=${this.addVersionForm.upDataContain}`, formDatas, { headers: { 'Content-Type': 'multipart/form-data' }, timeout: 600000 })
        .then(res => {
          uploading.close()
          let dataFile = res.data.data
          params.onSuccess(dataFile);
          this.$emit('visibleChange', false);
        }).catch(err => {
          uploading.close()
        })
    },
    successFile(fileInfo, file, list) {
      this.$message.success("上传成功");
      this.fileList = [];
      this.$emit('visibleChange', false);
    },
    changdel(e) {
      console.log(e)
    }
  },
}
</script>

<style lang="less" scoped>
.uploader-example {
  width: 90%;
  padding: 15px;
  font-size: 12px;
}
.uploader-example .uploader-btn {
  margin-right: 4px;
}
.uploader-example .uploader-list {
  max-height: 440px;
  overflow: auto;
  overflow-x: hidden;
  overflow-y: auto;
}
.uploader-file .uploader-file-resume {
  display: none !important;
}
.userBtn {
  z-index: 100;
  text-align: right;
  padding-right: 20px;
  border-top: 1px solid #c8cfde;
  background-color: #f5f7fa;
  position: absolute;
  bottom: 50px;
  left: 0;
  right: 0;
  line-height: 50px;
}
.upload-demo {
  margin: 0px 0 0 0px  !important;
}
.banben {
  display: flex;
  align-items: center;
  // justify-content: center;
  padding-left: 20px;
  margin-top: 30px;
  span {
    white-space: nowrap;
    width: 70px;
  }
}
</style>
